import React, {Component} from 'react';
import {observer} from 'mobx-react';
import {TabPage} from 'weaver-mobile-page';

@observer
export default class Tabs extends Component{
    renderTabContent = () => {
        const {
            tabConfig,
            children,
            store,
            history
        } = this.props;
        if (Array.isArray(children)) {
            return React.cloneElement(children[tabConfig.tabProps.initialPage], {
                store,
                history
            });
        } else {
            return React.cloneElement(children, {
                store,
                history
            });
        }
    }

    render(){
        const {
            tabConfig
        } = this.props;
        return (
            <div style={{width: '100%', height: '100%'}}>
                {tabConfig.tabs.length > 0 && <TabPage {...tabConfig} />}
                {tabConfig.tabs.length > 0 && this.renderTabContent()}
            </div>
        )
    }
}